
<template>

    <div class="jq-dropdown-menu" style="min-width:400px;height:200px;">

      <div class="" v-for="item in items">
        <div class="media-left">
          {{ item.img }}
        </div>
        <div class="media-body">
          <h4 class="media-heading"><a :href="generateUrl(item.product.id)">{{ item.product.title }}</a></h4>
          价格: ¥ {{ item.product.msrp }}
        </div>
        <div class="media-right">
          <p>数量：{{ item.amount }}</p>
        </div>
      </div>

      <div class="pull-right">
        <strong>总价: ¥{{ total }}</strong>
        &nbsp;
        <a class="btn btn-danger btn-lg" href="/carts">查看全部</a>
      </div>

    </div>

</template>

<script>
  import Query from '../query.js'

  export default {
    data() {
      return {
        count: 0,
        items: [],
        merchant: "",
        total: 0
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      async initData(){
        let self = this
        await Query.get("/carts/get_data?limit=2").then(function(data) {
          let merchants = Object.keys(data)
          if(merchants.length > 0) {
            let merchant = merchants[0]
            data = data[merchant].carts
            self.merchant = merchant
            self.count = data.length
            self.items = data
            self.total = data.reduce((a, b) => a + parseFloat(b.product.msrp)*b.amount, 0)
          }
        })
      },
      generateUrl(id) {
        return "/products/" + id
      }

    }
  }
</script>
